<template>
  <div>
    <h1>News</h1>
    <button @click="toDetail1">娱乐新闻</button>
    <button @click="toDetail2">体育新闻</button>
    <router-view></router-view>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  export default defineComponent({
    name: "News",
  });
</script>
<script lang="ts" setup>
  import { useRouter } from "vue-router";
  /* 
     useRouter
        返回 router 实例，相当于在模板中使用 $router 必须在 setup() 中调用
  */
  const router = useRouter();
  const toDetail1 = () => {
    router.push("/home/news/detail");
  };
  const toDetail2 = () => {
    router.pusn({
      name: "Detail",
    });
  };
</script>

<style lang="scss" scoped></style>
